
<template>
	<view class="login_box">
		<image class="login_box_image"
			src="http://9288rus.com.82.kssite.cn/uploads/20240417/42c6f9dec2ca652a1d8914db41f0d56e.png" mode=""></image>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<view class="">
				<view class="form_name">
					{{ $t("message.dlzh") }}
				</view>
				<u-form-item class="sw" prop="userInfo.account" labelWidth='0' ref="item1">
					<u--input v-model="model1.userInfo.account" border="none"
						:placeholder="$t('message.zh_placeholder')"></u--input>
				</u-form-item>
			</view>
			<view class="logn_items">
				<view class="form_name">
					{{ $t("message.dlmm") }}
				</view>
				<u-form-item class="sw" prop="userInfo.password" labelWidth='0' ref="item1">
					<u--input v-model="model1.userInfo.password" border="none"
						:placeholder="$t('message.mm_placeholder')"></u--input>
				</u-form-item>
			</view>
			<view class="lang_active" >
				<text @click="switchLanguage()">
					{{ $t("message.lang") }}
				</text> 
			</view>
			<button @click="submit()">
				{{ $t("message.login") }}
			</button>
		</u--form>
		<view class="flex_lang">
			<view class="xieyi">
				<u-checkbox-group v-model="checkboxValue1" activeColor='#01653B' placement="column"
					@change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:name="item.name">
					</u-checkbox>
				</u-checkbox-group>
				{{ $t("message.ydbty") }}
				<text @click="xieyi(1)">
					"{{ $t("message.yhxy") }}"
				</text>
				{{ $t("message.he") }}
				<text @click="xieyi(2)">
					"{{ $t("message.ysxy") }}"
				</text>
			</view>

		</view>
		
		<view class="lxwm_box">
			<view class="lxwm" @click="lx">
				{{ $t("message.lxwm") }}
			</view>
		</view>
		

		

		<u-toast ref="uToast"></u-toast>

		<view class="v_content" v-show='false'>
			<view class="v_content_lx" v-html="aboutlist.contact">
			</view>
			<view class="v_content_image">
				<view class="">
					<view class="" style="text-align: center;margin-bottom: 10rpx;">
						微信
					</view>
					<image :src="aboutlist.qrcode.wechat" mode=""></image>
				</view>
				<view class="">
					<view class="" style="text-align: center;margin-bottom: 10rpx;">
						whatsapp
					</view>
					<image :src="aboutlist.qrcode.whatsapp" mode=""></image>

				</view>
			</view>

			<view class="v_content_about">
				{{aboutlist.about}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aboutlist: {},
				checkboxValue1: [1],
				checkboxList1: [{
					name: 0,
					disabled: false
				}],
				model1: {
					userInfo: {
						account: '',
						password: ''
						// password@123456
					},
				},
				rules: {
					'userInfo.account': {
						type: 'string',
						required: true,
						min: 4,
						message: this.$t("message.zh_placeholder"),
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						min: 4,
						message: this.$t("message.mm_placeholder"),
						trigger: ['blur', 'change']
					},
				},


			}
		},
		onShow() {
			if (uni.getStorageSync('lang')) {

			} else {
				uni.setStorageSync('lang', 'en')
			}
			if(uni.getStorageSync('lang')=='en'){
				uni.setNavigationBarTitle({
				    title: "Регистрация счетов"
				});
			}
			
		},
		onLoad() {
			
		},
		methods: {
			lx(){
				uni.navigateTo({
					url:"/pages/lxwm/lxwm"
				})
			},
			switchLanguage() {
				if (this.$i18n.locale == 'en') {
					this.$i18n.locale = 'zh'
				} else if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en'
				} else {
					this.$i18n.locale = 'zh'
				}
				if (uni.getStorageSync('lang')) {
					if (uni.getStorageSync('lang') == 'en') {
						uni.setStorageSync('lang', 'zh')
					} else if (uni.getStorageSync('lang') == 'zh') {
						uni.setStorageSync('lang', 'en')
					}
				} else {
					uni.setStorageSync('lang', 'zh')
				}
				uni.redirectTo({
				    url: '/pages/login/login'
				});
			},
			// 获取关于我们信息
			about() {
				let _this = this
				uni.$u.http.post('/api/index/profile', {}).then(res => {
					res.data.qrcode.wechat = _this.$IMG_URL + '' + res.data.qrcode.wechat
					res.data.qrcode.whatsapp = _this.$IMG_URL + '' + res.data.qrcode.whatsapp

					_this.aboutlist = res.data

					console.log(_this.aboutlist)
				}).catch(err => {

				})
			},
			xieyi(index) {
				uni.navigateTo({
					url: '/pages/xy/xy?id=' + index,
				});
			},
			checkboxChange(n) {

			},
			submit() {
				let _this = this
				if (this.checkboxValue1[0] != 0) {
					uni.$u.toast(_this.$t("message.ty"))
					return
				} else {

				}
				this.$refs.uForm.validate().then(res => {
					uni.$u.http.post('/api/user/login', {
						account: this.model1.userInfo.account,
						password: this.model1.userInfo.password
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})

						if (res.code == 1) {
							uni.setStorageSync('token', res.data.userinfo.token)
							uni.setStorageSync("information", res.data.userinfo)
						} else {
							return
						}
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 500)
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					})

				}).catch(errors => {

				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="less">
	.xieyi {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 33rpx;
		text-align: center;
		font-weight: 400;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #666666;

		.u-checkbox-label--left {
			margin-bottom: 0 !important;
		}

		.u-checkbox__icon-wrap--square {
			width: 30rpx !important;
			height: 30rpx !important;
			border-radius: 50% !important;
			// border: 2rpx solid #666666 !important;
		}

		text {
			color: #01653B;
		}
	}

	.login_box /deep/ .u-form-item__body {
		padding: 0 !important;
		width: 100% !important;
		height: 96rpx !important;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.06) !important;
		border-radius: 20rpx;

		input {
			height: 96rpx !important;
			padding: 0 31rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #8E8E8E;
		}


	}

	.u-form-item__body__right__message {
		margin: 20rpx 20rpx 0;
	}

	.form_name {
		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
		margin-bottom: 27rpx;
	}

	.login_box {
		padding: 77rpx 45rpx 0;
		min-height: 100vh;
		background-image: url(http://9288rus.com.82.kssite.cn/uploads/20240417/61c817b88dde39f8ed729c6f6e72b8af.jpg);
		background-size: cover;

		button {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(0deg, #01653B, #81C19D);
			box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(255, 255, 255, 0.5);
			border-radius: 45rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.logn_items {
			margin: 65rpx 0 80rpx;
		}

		.login_box_image {
			width: 230rpx;
			height: 230rpx;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(2, 72, 43, 0.21);
			border-radius: 60rpx;
			border: 8rpx solid rgba(220, 240, 227, 0.4);
			margin: 0 auto 100rpx;
			display: block;
		}
	}

	.v_content {
		margin-top: 40rpx;

		.v_content_lx {
			font-size: 35rpx;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			text-align: center;
		}

		.v_content_image {
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.v_content_about {
			font-size: 35rpx;
			font-weight: 400;
			color: #333333;
			padding-bottom: 40rpx;
			text-align: center;
			line-height: 55rpx;
		}
	}

	.flex_lang {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lang_active {
		text-align: right;
		
		text{
			color: #81C19D;
			font-size:35rpx;
			margin:-40rpx 0 30rpx;
				display: inline-block;
		}
	}
	.lxwm_box{
		text-align: center;
	}
	.lxwm{
		text-align: center;
		margin: 40rpx auto;
		padding: 15rpx 40rpx;
		font-size: 35rpx;
		border-radius: 40rpx;
		color: #81C19D;
		display: inline-block;
		// width: 300rpx;
		border: 1rpx solid #81C19D;
	}
</style>